<template>
  <div>
    <div class="mantle"></div>
    <div class="wrap">
      <div class="title">{{ title }}</div>
      <ul class="nav">
        <li
          :class="{ active: navCode === item.code }"
          v-for="(item, index) in navList"
          :key="index"
          @click="checkCode(item)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="content">
        <template v-if="navCode === '1'">
          
        </template>
      </div>
      <div class="btn">
        <ep-button type="back" @click="$emit('close')">返回</ep-button>
        <ep-button style="margin-left: 15px;" type="save">保存</ep-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "formDialog",
  props: {
    title: {
      type: String,
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      navList: [],
      navCode: "1",
    };
  },
  created() {
    this.getNavList();
  },
  methods: {
    getNavList() {
      this.navList = [
        { name: "基本信息", code: "1" },
        { name: "媒体信息", code: "2" },
        { name: "责任矩阵", code: "3" },
        { name: "监测设备", code: "4" },
        { name: "保护范围", code: "5" },
      ];
    },
    checkCode(item) {
      this.navCode = item.code;
    },
  },
};
</script>

<style lang="scss" scoped>
.mantle {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
}
.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108vh;
  height: 89vh;
  transform: translate(-50%, -50%);
  z-index: 1001;
  box-sizing: border-box;
  padding: 0 8vh;
  background: url("@/assets/img/small-dialog.svg") no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 22px;
    font-weight: bold;
    line-height: 10vh;
    text-align: center;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2vh;
    li {
      flex: 0 0 auto;
      width: 102px;
      height: 32px;
      line-height: 32px;
      margin-right: 20px;
      background: url("@/assets/img/dialog-selected.svg") no-repeat;
      background-size: 102px 32px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      &.active {
        background: url("@/assets/img/dialog-unselect.svg") no-repeat;
      }
    }
  }
  .content {
    height: calc(66vh - 32px);
    margin-top: 2vh;
    overflow: auto;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 2vh;
  }
}
</style>
